<style>
    /* 根据字数修改 */
    .layui-form-label {
        width: 100px;
        text-align: left;
    }

    .layui-mini {
        display: inline-block;
        width: 100px;
        height: 24px;
        border-radius: 4px;
    }

    .layui-input-wrap {
        width: 100px;
        line-height: 24px;
        display: inline-block;
    }







    .list-item,
    .list {
        display: flex;
        align-items: baseline;
        padding: 0 10px;
        flex-wrap: wrap;
        border-radius: 4px;
    }


    .tip {
        color: #00000073;
        margin-left: 12px;
        font-size: 12px;
        width: 100%;
    }
</style>
<div class="layuimini-container layuimini-page-anim">
    <!-- 用于创建子页面 -->
    <div class="page-create"></div>
    <!-- page-main-create -->
    <!-- 用于显示 隐藏 -->
    <div class="layuimini-main page-main-create">
        <div class="title-row layuimini-title title-sticky">
            <div class="title-left">
                <h4><span>计件积分工单加减分配置</span></h4>
            </div>
            <div class="title-right">
                <span class="title-right-text">
                    <button class="layui-btn layui-btn-primary layui-btn-sm edit-btn" lay-on="edit">编辑</button>
                </span>
            </div>
        </div>
        <div class="section">
            <div class="top-panel p-5 mb-5">
                <div class="layui-bg-orange-500 p-5 base-card">
                    <div class="title-row">
                        <div class="title-left">
                            <div class="title-info">
                                <div class="title-line"></div>
                                <span class="title-text">通用规则</span>
                            </div>

                        </div>
                    </div>

                    <div class="layui-row layui-col-space10 layui-font-gray">
                        <div class="layui-col-md12">
                            <div class="font-weight pl-4 layui-font-14 layui-font-black">
                                验收、抽查减分
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <div class="list-item">
                                <span class="sub-title">工单验收不通过减分范围：</span>
                                <span class="sub-value font-weight layui-font-red">分（每单每次）</span>
                                <div class="layui-font-12 tip">&emsp;</div>
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <div class="list-item">
                                <span class="sub-title">工单抽查不通过减分范围</span>
                                <span class="font-weight layui-font-red">分 至 分</span>
                                <div class="layui-font-12 tip">（抽查的扣分是在验收扣分的基础上进一步扣分）</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <!-- 按路线积分类工单 -->
            <div class="top-panel p-5 mb-5">
                <div class="layui-bg-red-500 p-5 base-card">
                    <div class="title-row">
                        <div class="title-left">
                            <div class="title-info">
                                <div class="title-line"></div>
                                <span class="title-text">按路线积分类工单</span>
                            </div>
                        </div>
                    </div>

                    <div class="layui-row layui-col-space10 layui-font-gray">
                        <div class="layui-col-md12">
                            <div class="font-weight pl-4 layui-font-14 layui-font-black">
                                常规工单
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <div class="list-item">
                                <span class="sub-title">作业未达标减分:</span>
                                <span class="sub-value font-weight layui-font-red">%积分（每单）</span>
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <div class="list-item">
                                <span class="sub-title">未及时接单：</span>
                                <span class="sub-value font-weight layui-font-red">%积分（每单）</span>
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <div class="list-item">
                                <span class="sub-title">未及时完工：</span>
                                <span class="sub-value font-weight layui-font-red">%积分（每单）</span>
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <div class="list-item">
                                <span class="sub-title">未及时接单、完工：</span>
                                <span class="sub-value font-weight layui-font-red">%积分（每单）</span>

                            </div>
                        </div>
                        <div class="layui-col-md12">
                            <div class="font-weight pl-4 layui-font-14 layui-font-black">
                                临时报事工单
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <div class="list-item">
                                <span class="sub-title">未及时接单：</span>
                                <span class="sub-value font-weight layui-font-red">%积分（每单）</span>

                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <div class="list-item">
                                <span class="sub-title">未及时完工：</span>
                                <span class="sub-value font-weight layui-font-red">%积分（每单）</span>
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <div class="list-item">
                                <span class="sub-title">未及时接单、完工：</span>
                                <span class="sub-value font-weight layui-font-red">%积分（每单）</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>





            <!-- 按点位积分类工单 -->

            <div class="top-panel p-5 mb-5">
                <div class="layui-bg-green-500 p-5 base-card">
                    <div class="title-row">
                        <div class="title-left">
                            <div class="title-info">
                                <div class="title-line"></div>
                                <span class="title-text">按点位积分类工单</span>
                            </div>
                        </div>
                    </div>


                    <div class="layui-row layui-col-space10 layui-font-gray">
                        <div class="layui-col-md12">
                            <div class="font-weight pl-4 layui-font-14 layui-font-black">
                                常规工单
                            </div>
                        </div>

                        <div class="layui-col-md4">
                            <div class="list-item">
                                <span class="sub-title">未及时接单：</span>
                                <span class="sub-value font-weight layui-font-red"> %积分（每单）</span>
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <div class="list-item">
                                <span class="sub-title">未及时完工：</span>
                                <span class="sub-value font-weight layui-font-red"> %积分（每单）</span>
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <div class="list-item">
                                <span class="sub-title">未及时接单、完工：</span>
                                <span class="sub-value font-weight layui-font-red"> %积分（每单）</span>
                            </div>
                        </div>

                        <div class="layui-col-md12">
                            <div class="font-weight pl-4 layui-font-14 layui-font-black">
                                临时报事工单
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <div class="list-item">
                                <span class="sub-title">未及时接单：</span>
                                <span class="sub-value font-weight layui-font-red"> %积分（每单）</span>
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <div class="list-item">
                                <span class="sub-title">未及时完工：</span>
                                <span class="sub-value font-weight layui-font-red"> %积分（每单）</span>
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <div class="list-item">
                                <span class="sub-title">未及时接单、完工：</span>
                                <span class="sub-value font-weight layui-font-red"> %积分（每单）</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 普通计件 -->

            <div class="top-panel p-5 mb-5">
                <div class="layui-bg-blue-500 p-5 base-card">
                    <div class="title-row">
                        <div class="title-left">
                            <div class="title-info">
                                <div class="title-line"></div>
                                <span class="title-text">普通计件</span>
                            </div>
                        </div>
                    </div>


                    <div class="layui-row layui-col-space10 layui-font-gray">
                        <div class="layui-col-md12">
                            <div class="font-weight pl-4 layui-font-14 layui-font-black">
                                常规工单
                            </div>
                        </div>

                        <div class="layui-col-md4">
                            <div class="list-item">
                                <span class="sub-title">未及时接单：</span>
                                <span class="sub-value font-weight layui-font-red"> %积分（每单）</span>
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <div class="list-item">
                                <span class="sub-title">未及时完工：</span>
                                <span class="sub-value font-weight layui-font-red"> %积分（每单）</span>
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <div class="list-item">
                                <span class="sub-title">未及时接单、完工：</span>
                                <span class="sub-value font-weight layui-font-red"> %积分（每单）</span>
                            </div>
                        </div>

                        <div class="layui-col-md12">
                            <div class="font-weight pl-4 layui-font-14 layui-font-black">
                                临时报事工单
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <div class="list-item">
                                <span class="sub-title">未及时接单：</span>
                                <span class="sub-value font-weight layui-font-red"> %积分（每单）</span>
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <div class="list-item">
                                <span class="sub-title">未及时完工：</span>
                                <span class="sub-value font-weight layui-font-red"> %积分（每单）</span>
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <div class="list-item">
                                <span class="sub-title">未及时接单、完工：</span>
                                <span class="sub-value font-weight layui-font-red"> %积分（每单）</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>




        </div>


    </div>
</div>
<script>
    layui.use(['form', 'table', 'tabs', 'miniPage', 'element'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            util = layui.util,
            miniPage = layui.miniPage;
        /******************** 事件 start ********************/
        /******************** 事件 end ********************/
        util.on('lay-on', {
            'edit': function () {
                console.log('11111')
                miniPage.renderPageCreate('/page/accumulatedWorkOrder/pieceWorkManager/components/pieceRateAdd.html')
            },

        })
        /******************** 渲染组件 end ********************/
        // 开启监听 折叠展开事件
        miniPage.listen()

    });
</script>